<template>
    <div id="app">
        <div class="box">
            <div>
                <el-button type="primary" @click="createTemplate">创建模板</el-button>
            </div>
        </div>
        <div class="box">
            <el-table :data="templateList" border :height="`calc(100vh - 305px)`" :highlight-current-row="true">
                <el-table-column label="模板名称" align="center" prop="name" />
                <el-table-column label="模板类型" align="center" prop="type" />
                <el-table-column label="纸张类型" align="center">
                    <template slot-scope="scope">
                        {{ scope.row.paperType == "other" ? "自定义纸张" : scope.row.paperType }}
                    </template>
                </el-table-column>
                <el-table-column label="纸张高度" align="center" prop="paperHeight" />
                <el-table-column label="纸张宽度" align="center" prop="paperWidth" />
                <el-table-column align="center" label="操作" width="200">
                    <template slot-scope="scope">
                        <a style="color: #1c84c6" @click="designTemplate(scope.row)">设计</a>
                        <!-- <a style="color: #1c84c6; margin-left: 8px" @click="previewTemplate(scope.row)">预览</a> -->
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-dialog title="添加模板" :visible.sync="addOpen" width="500px" append-to-body>
            <el-form ref="addForm" :model="addForm" :rules="addRules" label-width="80px">
                <el-form-item label="模板名称" prop="name">
                    <el-input v-model="addForm.name" />
                </el-form-item>
                <el-form-item label="模板类型" prop="type">
                    <el-input v-model="addForm.type" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">确定</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <el-dialog title="预览" :visible.sync="add123" width="500px" append-to-body>
            <div style="background: #ccc; padding: 14px 0; display: flex; justify-content: center; max-height: 50vh; overflow: auto">
                <div style="background-color: white" v-html="container"></div>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { hiprint } from "vue-plugin-hiprint";
import { GetPrintTempForHiprintList, SavePrintTempForHiprint } from "@/service/baseapi";
export default {
    props: {
        visible: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            container: "",
            add123: false,
            flag: false,
            form: {},
            templateList: [],
            template: null,
            addOpen: false,
            addForm: {},
            addRules: {
                name: [{ required: true, message: "请输入模板名称", trigger: "blur" }],
                type: [{ required: true, message: "请输入模板类型", trigger: "blur" }]
            }
        };
    },
    created() {
        this.getList();
    },
    methods: {
        previewTemplate(row) {
            this.add123 = true;
            try {
                this.template = JSON.parse(row.template);
            } catch (error) {}
            let hiprintTemplate = new hiprint.PrintTemplate({
                template: this.template
            });
            let html = hiprintTemplate.getHtml();
            this.container = html[0].innerHTML;
        },
        initForm() {
            this.addForm.type = "";
            this.addForm.name = "";
        },
        getList() {
            this.openLoading();
            this.templateList = [];
            var that = this;
            GetPrintTempForHiprintList()
                .then(res => {
                    console.log(res);
                    if (res.data != undefined) {
                        that.templateList = res.data.list;
                    }
                    that.closeLoading();
                })
                .catch(err => {
                    this.$message.error("数据请求异常");
                    that.closeLoading();
                });
        },
        designTemplate(row) {
            this.$router.push({
                name: "hiprintDesigner",
                params: {
                    zqh: row
                }
            });
        },
        createTemplate() {
            this.addOpen = true;
        },
        onSubmit() {
            var that = this;
            this.$refs["addForm"].validate(valid => {
                var that = this;
                if (valid) {
                    that.openLoading();
                    var jsondata = {
                        ...this.addForm
                    };
                    SavePrintTempForHiprint(jsondata)
                        .then(res => {
                            console.log(res);
                            that.closeLoading();
                            that.$message({ message: "操作成功", type: "success" });
                            that.getList();
                            that.addOpen = false;
                            that.initForm();
                        })
                        .catch(err => {
                            that.$message.error("操作失败");
                            that.closeLoading();
                            that.initForm();
                        });
                }
            });
        }
    }
};
</script>

<style scoped></style>
